<template>
  <div class="tabs-container">
    <div class="tabs">
      <div
          class="tab"
          :class="{ active: selectedTab === index }"
          v-for="(tab, index) in tabs"
          :key="index"
          @click="selectTab(tab,index)"
      >
        {{ tab.name }}
      </div>
      <div class="underline" :style="underlineStyle"></div>
    </div>

  </div>
</template>

<script>
export default {
  name: 'Tabs',
  props: {
    tabs: {
      type: Array,
      required: true
    },
  },
  data() {
    return {
      selectedTab: 0, // 默认选中第一个标签
    };
  },
  computed: {
    underlineStyle() {
      const selectedTab = this.$refs.tabs ? this.$refs.tabs[this.selectedTab] : null;
      if (!selectedTab) return {};
      return {
        width: `${selectedTab.offsetWidth}px`,
        left: `${selectedTab.offsetLeft}px`,
      };
    },
  },
  methods: {
    selectTab(tab,index) {
      this.selectedTab = index;
      this.$emit('selected', tab.value);
    },
  },
};
</script>

<style scoped>
.tabs-container {
  position: relative;
}

.tabs {
  display: flex;
  position: relative;
}

.tab {
  padding: 6px;
  cursor: pointer;
  font-size: 14px;
  transition: color 0.3s;
}

.tab.active {
  color: #007bff;
  border-bottom: 2px solid #007bff;
}

.underline {
  position: absolute;
  bottom: 0;
  height: 2px;
  color: #007bff;
  transition: all 0.3s ease;
}

.tab-content {
  padding: 20px;
  background-color: #f9f9f9;
  border-top: 1px solid #ccc;
}
</style>
